<template>
  <div id="goods">
    <!-- {{ goods }} -->
    <div class="left-menu-wrapper">
      <ul class="left-menu ">
        <li
          class="left-menu-item b-b-1px"
          v-for="good in goods"
          @click="ClickBtn(good.name)"
          :key="good.name"
          :class="[curActive === good.name ? 'active' : '']"
        >
          {{ good.name }}
        </li>
      </ul>
    </div>
    <div class="right-content">
      <ul class="right-content-wrapper">
        <div
          class="content-item"
          :id="good.name"
          v-for="good in goods"
          :key="good.name"
        >
          <h1 class="title">{{ good.name }}</h1>
          <ul class="item-detail">
            <li class="item-good" v-for="food in good.foods" :key="food.id">
              <img class="img" @click="show(food)" :src="food.imgUrl" alt="" />
              <div class="info" @click="show(food)">
                <h2 class="name">{{ food.name }}</h2>
                <p class="desc">{{ food.goodsDesc }}</p>
                <p class="price">{{ food.price }}</p>
              </div>
              <div class="control">
                <van-stepper
                  min="0"
                  @change="
                    value => {
                      BtnCount(value, food)
                    }
                  "
                  v-model="food.count"
                  theme="round"
                  button-size="22"
                  disable-input
                />
              </div>
            </li>
          </ul>
        </div>
      </ul>
    </div>
    <!-- 商品详情 -->
    <van-overlay
      class-name="showGoods"
      :show="showGoods"
      z-index="10"
      @click="showGoods = false"
    >
      <div class="goods-details">
        <!-- 商品图片 -->
        <div class="goods-img">
          <img :src="food.imgUrl" alt="" />
        </div>
        <div class="good-price">
          <!-- 商品名 -->
          <h1>{{ food.name }}</h1>
          <!-- 销售数量 好评率 -->
          <p>月售{{ food.sellCount }}份 好评率{{ food.rating }}%</p>
          <div class="price-box">
            <div>￥{{ food.price }}</div>
            <div><button class="Cart-btn">加入购物车</button></div>
          </div>
        </div>
      </div>
      <div class="goods-introduce">
        <div>
          <h1>商品介绍</h1>
          <p>{{ food.goodsDesc }}</p>
        </div>
        <!-- 评价 -->
        <div class="ratings">
          <van-button class="btn1" color="#1b89fa" v-if="food.rating"
            >全部 {{ food.ratings.length }}</van-button
          >
          <van-button class="btn2" color="#cfedf8" v-if="food.rating"
            >推荐 {{ food.ratings.length }}</van-button
          >
          <van-button class="btn3" color="#eaebef" v-if="food.rating"
            >吐槽 {{ food.ratings.length }}</van-button
          >
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import BetterScroll from 'better-scroll'
export default {
  // props: ['goods'],
  data() {
    return {
      curActive: '热销榜',
      showGoods: false,
      food: {}
    }
  },
  watch: {
    goods() {
      this.calcGoodsHeight()
      this.initBScroll()
    }
  },
  methods: {
    // 点击商品数量
    BtnCount(value, food) {
      this.$store.commit('CHANGE_NUM', { value, food })
    },
    show(food) {
      this.food = food
      this.showGoods = true
    },
    ClickBtn(name) {
      this.curActive = name
      this.wrapper1.scrollToElement(document.getElementById(name), 300)
    },
    initBScroll() {
      this.$nextTick(() => {
        this.wrapper = new BetterScroll('.left-menu-wrapper', {
          click: true
        })
        this.wrapper1 = new BetterScroll('.right-content', {
          probeType: 3,
          click: true
        })
        this.wrapper1.on('scroll', pos => {
          const y = Math.abs(pos.y)
          this.hArr.forEach(item => {
            if (y >= item.min && y < item.max) {
              this.curActive = item.title
            }
          })
        })
      })
    },
    calcGoodsHeight() {
      const res = []
      let total = 0
      setTimeout(() => {
        this.goods.forEach(item => {
          const h = document.getElementById(item.name).offsetHeight
          res.push({
            min: total,
            max: total + h,
            title: item.name
          })
          total += h
        })
        this.hArr = res
      }, 200)
    }
  },
  computed: {
    ...mapState(['goods'])
  },
  created() {},
  mounted() {
    this.initBScroll()
    this.calcGoodsHeight()
  }
}
</script>

<style lang="less" scoped>
#goods {
  display: flex;
  height: 100%;
  .left-menu {
    flex: 0 0 80px;
    background-color: #f2f6f9;
    overflow-y: auto;
    .left-menu-item {
      box-sizing: border-box;
      padding: 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      line-height: 20px;
      text-align: center;
      font-size: 14px;
      &.active {
        background-color: #fff;
      }
    }
  }
  .right-content {
    flex: 1;
    width: 100%;
    overflow-y: hidden;
    .content-item {
      width: 100%;
      .title {
        height: 40px;
        line-height: 40px;
        background-color: #f2f6f9;
        border-left: 2px solid #dedede;
        text-indent: 10px;
        color: #666;
      }
      .item-detail {
        box-sizing: border-box;
        padding: 15px;
      }
      .item-good {
        position: relative;
        display: flex;
        align-items: center;
        padding: 10px 0;
        line-height: 20px;
        .img {
          width: 70px;
          height: 70px;
        }
        .info {
          margin-left: 10px;
          .name {
            font-size: 16px;
            font-weight: 700;
          }
          .desc {
            font-size: 12px;
            color: #666;
          }
          .price {
            font-size: 14px;
            color: red;
            font-weight: 700;
          }
        }
        .control {
          position: absolute;
          bottom: 10px;
          right: 0;
          /deep/.van-stepper__plus {
            background-color: #00a3db;
          }
          /deep/.van-stepper__minus {
            border: none;
            color: white;
            background-color: #00a3db;
          }
          .iconfont {
            padding: 0 5px;
            font-size: 20px;
            color: #01a1e2;
          }
        }
      }
    }
  }
  .showGoods {
    display: flex;
    flex-direction: column;
    background-color: #f4f5f9;
    .goods-details {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 60%;
      background-color: #fff;
      border-bottom: 1px solid #cecece;
      .goods-img {
        height: 70%;
        width: 100%;
        border-bottom: 1px solid #f3f4f9;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .good-price {
        flex: 1;
        padding: 20px;
        h1 {
          font-weight: bold;
          font-size: 18px;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
          color: #cdcdcd;
        }
        .price-box {
          position: relative;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          > div:nth-of-type(1) {
            font-weight: bold;
            color: red;
            font-size: 18px;
          }
          .Cart-btn {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 120px;
            height: 40px;
            background-color: #009fdb;
            border-radius: 20px;
            outline: none;
            border: none;
            color: #c3e5ec;
          }
        }
      }
    }
    .goods-introduce {
      border-top: 1px solid#d2d2d2;
      background-color: #fff;
      margin-top: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      > div:nth-of-type(1) {
        height: 30%;
        padding: 20px;
        border-bottom: 1px solid#d2d2d2;
        h1 {
          font-weight: 500;
          font-size: 18px;
        }
        p {
          text-indent: 2px;
          margin-top: 12px;
          font-size: 14px;
          color: #a4a4a4;
        }
      }
      .ratings {
        display: flex;
        padding: 20px;
        button {
          margin-left: 10px;
        }
        .btn1 {
          margin-left: 0;
          /deep/.van-button__text {
            color: #fff;
          }
        }
        /deep/.van-button__text {
          color: #000;
        }
      }
    }
  }
}
</style>
